<%--
  Created by IntelliJ IDEA.
  User: 31742
  Date: 2022/2/1
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>User</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/common/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/common/layui/css/layui.css">
    <script src="<%=request.getContextPath()%>/common/layui/layui.js"></script>
</head>
<body>
<div class="layui-collapse">

    <div class="layui-colla-item">
        <h2 class="layui-colla-title">条件查询</h2>
        <div class="layui-colla-content " style="padding: 0px">

            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="searchName" autocomplete="off"  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">家庭地址</label>
                            <div class="layui-input-inline">
                                <select id="pid" lay-filter="pid" name="pid">

                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="sid" lay-filter="sid" name="sid">

                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="cid" lay-filter="cid" name="cid">

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="button" class="layui-btn" lay-submit lay-filter="searchForm" value="查询" />
                                <input type="reset" class="layui-btn"  value="重置" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">数据展示</h2>
        <div class="layui-colla-content layui-show" style="padding: 0px">

            <div class="layui-card" >
                <div class="layui-card-body">
                    <table id="userTB" class="layui-hide" lay-filter="userTable"></table>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-xs" lay-event="updateInfo">修改信息</a>
</script>
<script type="text/html" id="updateInfo">
    <form class="layui-form layui-form-pane" lay-filter="upForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>


        <%--<div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <input type="checkbox" name="hobby1" lay-filter="hobbys" value="1" title="写作">
                <input type="checkbox" name="hobby2" lay-filter="hobbys" value="2" title="阅读">
                <input type="checkbox" name="hobby3" lay-filter="hobbys" value="3" title="发呆">
            </div>
        </div>--%>


        <div class="layui-form-item">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-inline">
                <select id="upid" lay-filter="upid" name="upid">

                </select>
            </div>
            <div class="layui-input-inline">
                <select id="usid" lay-filter="usid" name="usid">

                </select>
            </div>
            <div class="layui-input-inline">
                <select id="ucid" lay-filter="ucid" name="ucid">

                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" lay-submit lay-filter="updateForm" value="修改" />
            </div>
        </div>
    </form>
</script>
</body>
<script>
    layui.use(function () {
        var element = layui.element;
        var userTable = layui.table;
        var userForm = layui.form;
        var userLayer = layui.layer;


        element.render();

        initArea("pid",0);

        userForm.render("select");

        var table =  userTable.render({
            id:'userTB',
            elem:'#userTB',
            url:"<%=request.getContextPath()%>/user/queryUserPageData"
            ,parseData: function(res){
                return res.data;
            }
            ,page:true
            ,limit:6
            ,limits:[2,4,6,8,10]
            ,toolbar:true
            ,cols:[[
                {field:'name',  title: '账号'},
                {field:'sex',  title: '性别',templet:function (d){
                        if(d!=null){
                            return d.sex==1?"男":d.sex==2?"女":"";
                        }else {
                            return "";
                        }

                    }}
                ,{field:'hobbys',  title: '爱好',templet:function (d){
                        if (d!=null){
                            let hobbys = d.hobbys.split(",");
                            var hobby = "";
                            for (let i = 0; i < hobbys.length; i++) {
                                hobby+=hobbys[i]==1?"写作,":hobbys[i]==2?"阅读,":hobbys[i]==3?"发呆,":"";
                            }
                            if (hobby!=""){
                                return hobby.substring(0,hobby.length-1);
                            }
                            return hobby;
                        }
                        else {
                            return "";
                        }
                    }}
                ,{field:'birthday',  title: '生日',templet:function (d){
                        if (d.birthday!=null){
                            var bir = new Date(d.birthday);
                            var y = bir.getFullYear();
                            var M = bir.getMonth()+1;
                            var d = bir.getDate();
                            return y+'-'+M+'-'+d;
                        }else {
                            return "";
                        }

                    }}
                ,{field: "area",title: '家庭住址',templet:function (d){
                        var area = "";
                        if(d.sheng!=null&&d.sheng!=""){
                            area+=d.sheng;
                        }
                        if(d.shi!=null&&d.shi!=""){
                            area+=d.shi;
                        }
                        if(d.xian!=null&&d.xian!=""){
                            area+=d.xian;
                        }
                        return area;
                    }
                }
                ,{field:'createDate',  title: '注册时间',templet:function (d){
                        var bir = new Date(d.createDate);
                        var y = bir.getFullYear();
                        var M = bir.getMonth()+1;
                        var d = bir.getDate();
                        var h = bir.getHours();
                        var m = bir.getMinutes();
                        var s = bir.getSeconds();
                        return y+'-'+M+'-'+d+" "+h+":"+m+":"+s;
                    }}
                ,{fixed: 'right', title:"操作",  align:'center', toolbar: '#userBar'}
            ]]
        })

        userForm.on("submit(searchForm)",function (res){

            var areaid="";
            if(res.field.pid!=""){
                areaid+=res.field.pid+","
            }
            if(res.field.sid!=""){
                areaid+=res.field.sid+","
            }
            if(res.field.cid!=""){
                areaid+=res.field.cid+","
            }
            if (areaid.length!=0){
                areaid =  areaid.substring(0,areaid.length-1);
            }
            console.log(areaid)
            var search = {searchName:res.field.searchName,areaId:areaid}
            table.reload({
                where:search
            })
        })


        userTable.on("tool(userTable)",function (res){
            var upform = {};
            upform.sex = res.data.sex;
            var areaIds = res.data.areaId.split(",");
            upform.upid=areaIds[0];
            upform.usid=areaIds[1];
            upform.ucid=areaIds[2];

            if(res.event=="updateInfo"){
               var updateLayer = userLayer.open({
                    title:"修改信息",
                    type:1,
                    content:$("#updateInfo").html(),
                    area:['800px','300px']
                })
                initArea("upid",0);
                initArea("usid",upform.upid);
                initArea("ucid",upform.usid);



                userForm.on("select(upid)",function (res){
                    initArea("usid",res.value);
                    $("#ucid").html("");
                    userForm.render("select");
                })

                userForm.on("select(usid)",function (res){
                    initArea("ucid",res.value);
                    userForm.render("select");

                })

                userForm.val("upForm",upform);


                userForm.on("submit(updateForm)",function (rs){
                    var info = {sex : rs.field.sex};
                    var areaId = rs.field.upid+","+rs.field.usid+","+rs.field.ucid;
                    info.areaId = areaId;
                    info.id = res.data.id;
                    layer.confirm('确定要修改吗?', {icon: 3, title:'提示'}, function(index){
                        //do something
                        $.post({
                            url:"<%=request.getContextPath()%>/user/updateUserInfo",
                            async: false,
                            data:info,
                            success:function (result){
                                if (result.code==200){
                                    layer.msg("修改成功");
                                    userTable.reload("userTB");
                                    layer.close(index);
                                    layer.close(updateLayer);
                                }else {
                                    layer.msg(result.msg);
                                    layer.close(index);
                                }
                            }
                        })

                    });
                })

            }
        })




        userForm.on("select(pid)",function (res){
            initArea("sid",res.value);
            $("#cid").html("");
            userForm.render("select");
        })

        userForm.on("select(sid)",function (res){
            initArea("cid",res.value);
            userForm.render("select");

        })

        function initArea(elem,pid){
            var areaHtml="<option value=''>请选择</option>";
            $.post({
                url:"<%=request.getContextPath()%>/area/queryAreaByPid",
                async:false,
                data:{pid:pid},
                success:function (res){
                    if(res.code==200){
                        for (var i = 0; i < res.data.length; i++) {
                            if (res.data[i].id==pid){
                                areaHtml+="<option value='"+res.data[i].id+"' selected>"+res.data[i].name+"</option>";
                            }else {
                                areaHtml+="<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>";
                            }
                        }
                    }else {
                        layer.msg("请求异常");
                    }
                }
            })
            $("#"+elem).html(areaHtml);
        }

    })
</script>
</html>
